<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 -->
        <el-form ref="form" label-width="80px">
          <div>
            <el-form-item label="关键字">
              <el-row type="flex">
                <el-col :span="12">
                  <el-input
                    placeholder="根据关键字搜索"
                    style="width: 200px"
                    size="small"
                    v-model="input"
                  ></el-input>
                </el-col>
                <el-col :span="12" style="text-align: right">
                  <el-button size="mini" @click="clearMedium">清除</el-button>
                  <el-button type="primary" size="mini" @click="searchPrimary"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </el-form>
        <!-- 阴影部分 -->
        <div>
          <el-alert
            :title="`数据一共 ${total} 条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="编号" width="200px">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="100px">
            <template v-slot="{ row }">
              <span>
                {{
                  row.questionType === '1'
                    ? '单选'
                    : row.questionType === '2'
                    ? '多选'
                    : '简答'
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="题型编号" width="200px">
            <template v-slot="{ row }">
              <div>
                <div v-for="item in row.questionIDs" :key="item.index">
                  <a href="#" style="color: rgb(0, 153, 255)" @click="questionTypeClick(item.id)">{{
                    item.number
                  }}</a>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="200px">
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            width="200px"
          >
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="200px">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="200px">
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template #default="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                style="
                  color: #f56c6c;
                  background: #fef0f0;
                  border-color: #fbc4c4;
                "
                @click="del(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="el-pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes, jumper"
            :current-page="page"
            :page-size="pageSize"
            :total="total"
            :page-sizes="pages"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
     <Preview  ref="Preview"  :show-dialog.sync="showDialog"  ></Preview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import Preview from '../components/questions-preview'
export default {
  components: {
    Preview
  },
  data () {
    return {
      list: [], // 从接口处取回
      page: 1,
      pageSize: 10,
      total: 10,
      pages: [20, 30, 50, 100],
      input: '',
      showDialog: false // 显示隐藏
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 获取列表接口
    async initData () {
      const { data } = await randoms({
        page: this.page,
        pagesize: this.pageSize,
        keyword: this.input
      })
      this.list = data.items
      this.total = data.counts
    },
    // 页尺寸
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val
      this.initData()
    },
    // 当前页数
    handleCurrentChange (val) {
      // console.log(val)
      this.page = val
      this.initData()
    },
    // 清除
    clearMedium () {
      this.input = ''
      this.initData()
    },
    // 搜索
    searchPrimary () {
      this.page = 1
      this.initData()
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击题型
    questionTypeClick (id) {
      console.log(id)
      this.showDialog = true
      this.$refs.Preview.detail(id)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0;
  margin: 0;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.addbar {
  float: right;
  width: 10%;
}
.dialog-footer {
  text-align: right;
}
</style>
